<template>
	
	<!-- 自定义navbar组件【放在窗体外部，否则被content占据间距】 -->
	<CustomNavbar navTitle='进销存管理' :isTitleStyle="true"></CustomNavbar>
	
	<view class="container u-color-bg white">
		<view class="day">
			<view class="day-left">
				<view class="mr10">日期</view>
				<view class="mr10">
					<uni-datetime-picker type="date" v-model="date" @change="changeLog" />
				</view>
				<!-- <view>
					<uni-icons type="down" size="20" class="white"></uni-icons>
				</view> -->
			</view>
			<view class="day-right uni-section">
				<view class="day-right-item day-right-item-active u-color-theme">今日</view>
				<view class="day-right-item">昨日</view>
				<view class="day-right-item">本周</view>
				<view class="day-right-item">本月</view>
			</view>
		</view>
		<view class="day-item">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item class="swiper-item">
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item">
							<text>{{totalAmount}}</text>
							<view>销售额(元)</view>
						</view>
					</view>
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item swiper-item-center">
							<text>{{totalAmount}}</text>
							<view>销售笔数</view>
						</view>
					</view>
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item">
							<text>{{totalAmount}}</text>
							<view>毛利(元)</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item">
							<text>0.00</text>
							<view>销售额(元)</view>
						</view>
					</view>
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item swiper-item-center">
							<text>0.00</text>
							<view>销售笔数</view>
						</view>
					</view>
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item">
							<text>0.00</text>
							<view>毛利(元)</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item">
							<text>0.00</text>
							<view>销售额(元)</view>
						</view>
					</view>
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item swiper-item-center">
							<text>0.00</text>
							<view>销售笔数</view>
						</view>
					</view>
					<view class="swiper-item-item-box"> 
						<view class="swiper-item-item">
							<text>0.00</text>
							<view>毛利(元)</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
	
	<div class="marquee p20">
		<view>
			<uni-icons type="sound-filled" size="30"></uni-icons>
		</view>
		<marquee behavior="scroll" direction="left" class="fz24 p4">
			最新消息通知区域
		</marquee>
		<view>
			<uni-icons type="right" size="30"></uni-icons>
		</view>
	</div>
	
	<view class="grid">
		<uni-section title="商品相关" type="line" padding>
			<uni-grid :column="4" :highlight="true">
				<uni-grid-item class="grid-item">
					<navigator url="/pages/product/specifications/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/商品规格.png"></image>
							<text class="text">商品规格</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<navigator url="/pages/product/gategory/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/商品分类.png"></image>
							<text class="text">商品分类</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<navigator url="/pages/product/update?navTitle=新增商品">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/新增商品.png"></image>
							<text class="text">新增商品</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<navigator url="/pages/product/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/商品列表.png"></image>
							<text class="text">商品列表</text>
						</view>
					</navigator>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<uni-section title="进销存" type="line" padding>
			<uni-grid :column="4" :highlight="true">
				<uni-grid-item class="grid-item">
					<navigator url="/pages/order/purchase/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/进货记录.png"></image>
							<text class="text">进货记录</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<navigator url="/pages/order/sale/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/销售记录.png"></image>
							<text class="text">销售记录</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<navigator url="/pages/product/customer/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/客户管理.png"></image>
							<text class="text">客户管理</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<navigator url="/pages/product/supplier/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/供应商管理.png"></image>
							<text class="text">供应商管理</text>
						</view>
					</navigator>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		<uni-section title="便捷服务" type="line" padding>
			<uni-grid :column="4" :highlight="true">
				<uni-grid-item class="grid-item">
					<navigator url="/pages/product/store/index">
						<view class="grid-item-box" style="background-color: #fff;">
							<image src="/static/image/grid/仓库管理.png"></image>
							<text class="text">仓库管理</text>
						</view>
					</navigator>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<view class="grid-item-box" style="background-color: #fff;">
						<image src="/static/image/grid/库存预警.png"></image>
						<text class="text">库存预警</text>
					</view>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<view class="grid-item-box" style="background-color: #fff;">
						<image src="/static/image/grid/系统设置.png"></image>
						<text class="text">系统设置</text>
					</view>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<view class="grid-item-box" style="background-color: #fff;">
						<image src="/static/image/grid/统计报表.png"></image>
						<text class="text">统计报表</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
		
		<uni-section title="其他" type="line" padding>
			<uni-grid :column="4" :highlight="true">
				<uni-grid-item class="grid-item">
					<view class="grid-item-box" style="background-color: #fff;">
						<image src="/static/image/grid/最新公告.png"></image>
						<text class="text">最新公告</text>
					</view>
				</uni-grid-item>
				<uni-grid-item class="grid-item">
					<view class="grid-item-box" style="background-color: #fff;">
						<image src="/static/image/grid/新手指南.png"></image>
						<text class="text">新手指南</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>
	</view>
	
	<CustomAddBtn path="/pages/product/update?navTitle=新增商品"></CustomAddBtn>
	
</template>

<script>
	import CustomNavbar from "@/components/CustomNavbar.vue"
	import CustomAddBtn from "@/components/CustomAddBtn.vue"
	import {
		orderApi
	} from '@/utils/api.js'
	export default {
		data() {
			return {
				background: ['red', 'gray', 'color3'],
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 500,
				date: Date(),
				totalAmount: 0,
				totalCount: 0,
				totalProfit: 0,
			}
		},
		components: {
			CustomNavbar,CustomAddBtn,
		},
		onReady() {
			this.loadData()
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			changeLog(e){
				this.date = e;
				//
			},
			loadData(){
				//赋值数据【编辑】
				orderApi.indexStatistics({
					date: this.date
				}).then(res => {
					this.totalAmount = res.totalCount
					this.totalCount = res.totalCount
					this.totalProfit = res.totalCount
				})
			}
		}
	}
</script>

<style>
	.day{
		display: flex;
		justify-content: space-between;
	}
	.day-left{
		font-weight: bold;
		display: flex;
		align-items: center;
	}
	.day-right{
		display: flex;
		border-sh
		.day-right-item{
			font-size: 20rpx !important;
			padding: 10rpx 0 !important;
		}
		.day-right-item-active{
			background-color: #fff;
			font-weight: bold;
			color: #0d6efd;
		}
	}
	.swiper{
		height: 260rpx;
	}
	.swiper-item{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.swiper-item-item-box{
		height: 60%;
		flex: 1;
	}
	.swiper-item-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		text{
			font-weight: bold;
			margin-bottom: 10rpx;
			color: #dc3545;
		}
	}
	.swiper-item-center{
		border-left: 2rpx solid #fff !important;
		border-right: 2rpx solid #fff;
	}
	/* 修改swiper原点样式 */
	.uni-swiper-dot{
		width: 60rpx !important;
		height: 10rpx !important;
		border-radius: 10rpx !important;
		background: #fff !important;
	}
	.uni-swiper-dot-active{
		background: #606266 !important;
		box-shadow: 0 4rpx 80rpx rgba(0, 0, 0, 0.1);
	}
	.text{
		font-size: 24rpx;
		margin-top: 10rpx;
	}
</style>
<style>
	.marquee{
		display: flex;
		align-items: center;
	}
</style>
<style>
	.grid-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		image{
			width: 100rpx;
			height: 100rpx;
		}
	}
	.grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
		image{
			padding-bottom: 10rpx;
		}
	}
</style>



